<template>
  <div class="page-view">
    <div class="div-sex">
      <div
        class="list"
        :class="{checked: userInfo.Sex === 0}"
        @click="onSaveSex(0)"
      >
        <div class="name">
          男
        </div>
        <img
          v-if="userInfo.Sex !== 1"
          class="img-ok"
          src="~assets/mine/Ok.png"
        >
      </div>
      <div
        class="list"
        :class="{checked: userInfo.Sex === 1}"
        @click="onSaveSex(1)"
      >
        <div class="name">
          女
        </div>
        <img
          v-if="userInfo.Sex === 1"
          class="img-ok"
          src="~assets/mine/Ok.png"
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapState } from 'vuex'
import { SET_USER_INFO } from '@/store/mutations'
export default Vue.extend({
  data () {
    return {
      curSex: '',
      isChgSuccess: false,
    }
  },
  computed: mapState(['userInfo']),
  methods: {
    onSaveSex (curSex : number) {
      this.$axios({
        url: 'Setting/UpdateUserInfo',
        data: {
          Type: 3, // Sex
          Content: curSex,
        },
      }).then(res => {
        this.isChgSuccess = true
        this.$store.commit(SET_USER_INFO, { Sex: curSex })
        setTimeout(() => {
          this.$router.back()
          this.$toast({ message: '更新成功！', duration: 1000 })
        }, 500)
      })
    },
  },
})
</script>

<style lang="scss" scoped>
.div-sex {
  background: #FFF;
  padding-left: 42px;
}
.list {
  height: 109px;
  display: flex;
  align-items: center;
  + .list{
    @include px1border(top, #e1e1e1)
  }
}
.name {
  color: #333;
  font-size: 30px;
}
.checked .name {
  color: $primary-web;
}
.img-ok{
  position: absolute;
  right: 30px;
  width: 24px;
  height: 16px;
}
</style>
